<template>
    <el-row>
        <el-col :span="24">
            
            <h2>窗口挂号</h2>
            <el-row>
                <el-col :offset="1" :span="20">
                    <el-button @click="reg">挂号</el-button><el-button @click="reset">重置</el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-col :offset="1" :span="20">
                    <h2 style="font-size:18px">基本信息</h2>
                    <el-form inline="true">
                        <el-form-item>
                            <div>
                                <p style="margin: 0;">病历号</p>
                                <el-input v-model="form.caseNumber" style="width: 150px;" placeholder="请输入病历号"/>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <div>
                                <p style="margin: 0;">姓名</p>
                                <el-input v-model="form.realName" style="width: 150px;" placeholder="请输入病人姓名"/>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <div>
                                <p style="margin: 0;">性别</p>
                                <el-select
                                v-model="form.gender"
                                placeholder="请选择性别"
                                style="width: 120px;">
                                <el-option label="男" value="男" />
                                <el-option label="女" value="女" />
                            </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item style="width: 50px;"/>
                        <el-form-item >
                            <div>
                                <p style="margin: 0;">年龄</p>
                                <el-input v-model="form.age" style="width: 100px;" readonly/>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <div>
                                <p style="margin: 0;">出生日期</p>
                                <el-date-picker
                                    v-model="form.birthday"
                                    type="date"
                                    value-format="YYYY-MM-DD"
                                    placeholder="选择日期"
                                    @change="changeBirth"
                                    style="width: 150px;"
                                />
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <div>
                                <p style="margin: 0;">家庭住址</p>
                                <el-input v-model="form.homeAddress" style="width: 300px;" placeholder="请输入家庭住址" />
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <div>
                                <p style="margin: 0;">身份证号</p>
                                <el-input v-model="form.cardNumber" placeholder="请输入身份证号" />
                            </div>
                        </el-form-item>

                    <h2 style="font-size:18px">挂号信息</h2>

                        <el-form-item>
                            <!-- 自费、市医保 -->
                             <div>
                                <p style="margin: 0;">结算类别</p>
                                <el-select
                                    style="width: 150px;"
                                    v-model="form.settleCategoryId"
                                    placeholder="请选择">
                                    <el-option v-for="sg in settlecategorysList" 
                                                :key="sg.id"
                                                :label="sg.settleName" 
                                                :value="sg.id" />
                                </el-select>
                             </div>
                            
                        </el-form-item>
                        <el-form-item>
                            <div>
                                <p style="margin: 0;">看诊日期</p>
                                <el-date-picker
                                    style="width: 150px;"
                                    v-model="form.visitDate"
                                    type="date"
                                    value-format="YYYY-MM-DD"
                                    placeholder="选择日期"
                                    @change="visitDateChange"
                                />
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <div>
                                <p style="margin: 0;">午别</p>
                                <el-select
                                    style="width: 150px;"
                                    v-model="form.noon"
                                    placeholder="请选择"
                                    @change="getEmployeeByCondition">
                                    <el-option label="上午" value="上午" />
                                    <el-option label="下午" value="下午" />
                                </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <div>
                                <p style="margin: 0;">挂号科室</p>
                                <el-select
                                    style="width: 150px;"
                                    v-model="form.deptmentId"
                                    placeholder="请选择"
                                    @change="getEmployeeByCondition"
                                >
                                    <el-option v-for="dept in departmentList" 
                                                    :key="dept.id" 
                                                    :label="dept.deptName" 
                                                    :value="dept.id" />
                                </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <div>
                                <p style="margin: 0;">号别</p>
                                <el-select
                                    style="width: 150px;"
                                    v-model="form.registLevelId"
                                    placeholder="请选择"
                                    @change="changeRegLevel"
                                >
                                    <el-option v-for="level in regLevelList" 
                                                    :key="level.id" 
                                                    :label="level.registName" 
                                                    :value="level.id" />
                                </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <div>
                                <p style="margin: 0;">看诊医生</p>
                                <el-select
                                    style="width: 150px;"
                                    v-model="form.employeeId"
                                    placeholder="请选择医生"
                                    @visible-change="getEmployeeByCondition"
                                    @change="changeDocter"
                                >
                                    <el-option v-for="docter in doctersList" 
                                                    :key="docter.id" 
                                                    :label="docter.realname" 
                                                    :value="docter.id" />
                                </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <div>
                                <p style="margin: 0;">初始号额</p>
                                <el-input  :value="initNumber" placeholder="请输入" style="width: 150px;"/>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <div>
                                <p style="margin: 0;">已用号额</p>
                                <el-input v-model="number" readonly style="width: 150px;"/>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <div>
                                <p style="margin: 0;">病历本</p>
                                    <el-switch
                                    style="width: 150px;"
                                    v-model="form.isBook"
                                    inline-prompt
                                    active-text="是"
                                    inactive-text="否"
                                    active-value="是"
                                    inactive-value="否"
                                />
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <div>
                                <p style="margin: 0;">应收金额</p>
                                <el-input v-model="form.registMoney" readonly style="width: 150px;"/>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <!-- 现金、银行卡、微信、医保卡、支付宝 -->
                             <div>
                                <p style="margin: 0;">收费方式</p>
                                <el-select
                                    style="width: 150px;"
                                    v-model="form.registMethod"
                                    placeholder="请选择">
                                    <el-option label="现金" value="现金" />
                                    <el-option label="银行卡" value="银行卡" />
                                    <el-option label="微信" value="微信" />
                                    <el-option label="医保卡" value="医保卡" />
                                    <el-option label="支付宝" value="支付宝" />
                                </el-select>
                             </div>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
    
    </el-col>
    </el-row>
    </template>
    
    <script setup>
    import httpRequest from '@/common';
    import { ElMessage,FormItemContext} from 'element-plus';
    import { ref, getCurrentInstance, onMounted, computed } from 'vue';

    
    const {proxy} = getCurrentInstance();

    FormItemContext
    
     const form = ref({
        caseNumber: '',
        realName: '',
        gender: null,
        cardNumber: '',
        birthday: '',
        age: 0,
        ageType: '年',
        homeAddress: '',
        visitDate: '',
        noon: '上午',
        deptmentId: null,
        employeeId: null,
        registLevelId: null,
        settleCategoryId: null,
        isBook: '是',
        registMethod: null,
        visitState: 1,
        registMoney: null,
     })
    
     //所有号别
     const regLevelList = ref([]);
    
     //查询所有的号别
     const getLevelList = ()=>{
        httpRequest(
            proxy,
            'get',
            '/registlevel/all',
            null,
            (resultBean)=>{
                regLevelList.value = resultBean.data;
            }
        )
     }
    
     //所有门诊科室的列表
     const departmentList = ref([])
    
     //查询所有门诊科室
     const getDeptByType = ()=>{
        httpRequest(
            proxy,
            'get',
            '/department/type/门诊',
            null,
            (resultBean)=>{
                departmentList.value = resultBean.data;
            }
        )
     }
    
     //看诊日期所处的周几  为了计算医生的排班
     const dayOfWeek = ref(null);
    
     //**********看诊日期变化之后会触发*********************** */
     const visitDateChange = (v)=>{
        console.log('--------visitDateChange---------',v);
        const date = new Date(v); //用看诊日期构建一个date对象
        dayOfWeek.value = date.getDay(); //获取这个日期对应的星期几赋值给dayOfWeek变量  备用
    
        //重新查询医生
        getEmployeeByCondition();
     }
    
     //可以选择的医生列表
     const doctersList = ref([])
    
     /*
        通过上面选择的四个条件来查询对应的医生
          看诊日期+午别  判断排班
          科室
          号别
     */
     const getEmployeeByCondition = (v)=>{
        //下拉列表隐藏   什么都不做
        if(!v){
           return;
        }
    
        //下拉列表显示时   查询医生
    
        form.value.employeeId = null;
    
        if(dayOfWeek.value==null){
            ElMessage.error('看诊日期没选择')
            return;
        }
    
        if(!form.value.noon){
            ElMessage.error('午别没选择')
            return;
        }
    
        if(!form.value.deptmentId){
            ElMessage.error('科室没选择')
            return;
        }
    
        if(!form.value.registLevelId){
            ElMessage.error('号别没选择')
            return;
        }
       
    
            // let schedule = [0,0,0,0,0,0,0,0,0,0,0,0,0,0];
    
            let index = (dayOfWeek.value)*2 + (form.value.noon=='上午'?1:2) - 1 ;
    
            console.log('index---------',index);
    
            // schedule[index] = 1;
    
            // let scheduleNumber = schedule.join('');
    
            // console.log('挂号的日期---------------',scheduleNumber);
    
            httpRequest(
                proxy,
                'post',
                '/employee/conditions',
                {
                    scheduleIndex: index,  //排班
                    deptmentId: form.value.deptmentId, //科室id
                    registLevelId: form.value.registLevelId, //号别id
                    roleName: '门诊医生' //医生的角色
                },
                resultBean=>{
                    doctersList.value = resultBean.data;
                }
            )
    
    
     }
    
     //选择的号别改变时触发
     const changeRegLevel = (v)=>{
        console.log('----------changeRegLevel------------',v);
    
        regLevelList.value.forEach(level => {
            if(level.id==v){
                form.value.registMoney = level.registFee;
            }
        });
    
        //重新查询医生
        getEmployeeByCondition();
     }
    
     //存放结算类别的集合
     const settlecategorysList = ref([])
    
     //查询所有的结算类别
     const getSettlecategory = ()=>{
        httpRequest(
            proxy,
            'get',
            '/settlecategory/all',
            null,
            resultBean=>{
                settlecategorysList.value = resultBean.data
            }
        )
     }
    
     //****************选择出生日期变化时计算年龄********************** */
     const changeBirth = (birth)=>{
        if(form.value.birthday == null){
            form.value.age = null;
            return;
        }
        // 2003-08-20
        let birthday = new Date(birth);
        let now = new Date();
    
        let year = now.getFullYear()-birthday.getFullYear();
    
        if((now.getMonth()+1)<birthday.getMonth()){
            year-=1;
        }else if((now.getMonth()+1)==birthday.getMonth()){
    
            if(now.getDate()<=birthday.getDate()){
                year-=1;
            }
    
        }
        form.value.age = year;
     }

     //初始号额
     const initNumber = ref(30);
    
     //已用号额
     const number = ref(0);

     //查询已用挂号数量的
     const changeDocter = (v)=>{
        console.log('------changeDocter-------',v);
        //查询已用号额  @TODO
        console.log("-------------"+v);
        httpRequest(
            proxy,
            'get',
            '/register/count/'+v,
            null,
            resultBean=>{
                number.value = resultBean.data;
                if(number.value >= 30){
                    ElMessage.error('该医生挂号已满！');
                }
            }
        )
     }
    
     const reg = ()=>{
        //信息必须完善好了，才能进行
        // console.log(form.value.visitDate);
        if(form.value.caseNumber == '' ||
           form.value.realName == ''||
           form.value.cardNumber == '' ||
           form.value.gender == null ||   
           form.value.homeAddress == ''||
           form.value.birthday == '' ||
           form.value.age == 0){
            ElMessage.error('请完善基本信息！');
            return;
           }
    if(form.value.registMethod == null ||
        form.value.settleCategoryId == null||
        form.value.visitDate == ''||
        form.value.deptmentId == null||
        form.value.registLevelId == null||
        form.value.employeeId == null||
        form.value.visitState == null||
        form.value.registMoney == null){
            ElMessage.error('请完善挂号信息！');
            return;
        }
        httpRequest(
            proxy,
            'post',
            '/register',
            form.value,
            resultBean=>{
                ElMessage.success('挂号成功');
                // reset();
            }
        )
    
     }

     const reset=()=>{
        form.value ={
            caseNumber: '',
            realName: '',
            gender: null,
            cardNumber: '',
            birthday: '',
            age: 0,
            ageType: '年',
            homeAddress: '',
            visitDate: '',
            noon: '上午',
            deptmentId: null,
            employeeId: null,
            registLevelId: null,
            settleCategoryId: null,
            isBook: '是',
            registMethod: null,
            visitState: 1,
            registMoney: null,
        }
        doctersList.value = [];
     }
    
     onMounted(()=>{
        getLevelList();
        getDeptByType();
        getSettlecategory();
     })
    
    </script>
    
    <style>
    </style>